<template>
	<cl-page>
		<cl-confirm ref="Confirm"> </cl-confirm>
		<scroll-view :scroll-top="scrollTop" scroll-y class="list" :style="'height:'+scrollHeight+'px'"
			:scroll-with-animation="true">
			<view class="p-20">
				<view class="topic-top">
					<view>
						<view class="text-base">
							AI生成文章(Beta)
						</view>
						<view class="text-desc">
							通过按照以下步骤，您可以在几分钟内从文章想法到引人入胜的文章。
						</view>
					</view>
				</view>
				<view class="rounded-md">
					<view class="rounded-menu-item">
						<view class="rounded-menu-list " :class="index==current?'rounded-menu-current':''"
							v-for="(item,index) in list" :key="index" @click="changeCurrent(index)">
							<view class="rounded-menu-radiu">
								{{index+1}}
							</view>
							<view class="rounded-menu-text">
								{{item.label}}
							</view>
						</view>
					</view>
					<view class="rounded-container">
						<view v-show="current==0">
							<view class="rounded-container-title">
								描述您要创建的文章
							</view>
							<cl-form ref="Form" v-model="form" :rules="rules" :label-position="'top'">
								<cl-form-item label="你想写什么" prop="title">
									<cl-textarea v-model="list[0].form.title" :showConfirmBar="false" />
								</cl-form-item>
								<cl-form-item label="文章长度" prop="articleLength">
									<cl-select v-model="list[0].form.articleLength" :options="options.area"></cl-select>
								</cl-form-item>
								<cl-form-item label="关键词" prop="keyword">
									<cl-input v-model="list[0].form.keyword" />
								</cl-form-item>
							</cl-form>
							<view style="padding-top:2rem;margin-bottom:20rpx">
								<cl-button fill @tap="next(0)" type="primary" :loading="loading">下一步</cl-button>
							</view>
						</view>
						<view v-show="current==1">
							<view class="rounded-container-title">
								让 inktok 为你生成标题或者自己输入
								<view class="rounded-container-desc">
									现在让我们写下你的文章标题，这将是令人惊叹的文章开始。之后您将可以编辑生成结果，您也可以使用自己的标题。
								</view>
							</view>
							<view style="margin-bottom:20rpx">
								<view style="margin-bottom: 1rem;">
									<cl-button fill @tap="submit" type="primary" :loading="loading">生成标题</cl-button>
								</view>
								<view>
									<cl-button fill @tap="changeSelf(1)">自己输入</cl-button>
								</view>
							</view>
							<view v-show="list[1].iSelf">
								<cl-textarea style="width: 100%;" v-model="list[1].form.title"
									:showConfirmBar="false" />
								<view style="padding-top:2rem;margin-bottom:20rpx">
									<cl-button fill @tap="next(1)" type="primary" :loading="loading">下一步</cl-button>
								</view>
							</view>
						</view>
						<view v-show="current==2">
							<view class="rounded-container-title">
								生成文章简介或者自己输入
								<view class="rounded-container-desc">
									现在让我们写下你的文章介绍，这将是一篇精彩文章的开始。之后您将可以编辑生成结果，您也可以使用自己的标题。
								</view>
							</view>
							<view style="margin-bottom:20rpx">
								<view style="margin-bottom: 1rem;">
									<cl-button fill @tap="submit" type="primary" :loading="loading">生成文章简介</cl-button>
								</view>
								<view>
									<cl-button fill @tap="changeSelf(2)">自己输入</cl-button>
								</view>
							</view>
							<view v-show="list[2].iSelf">
								<cl-textarea style="width: 100%;" v-model="list[2].form.title"
									:showConfirmBar="false" />
								<view style="padding-top:2rem;margin-bottom:20rpx">
									<cl-button fill @tap="next(2)" type="primary" :loading="loading">下一步</cl-button>
								</view>
							</view>
						</view>
						<view v-show="current==3">
							<view class="rounded-container-title">
								生成大纲或者自己输入
								<view class="rounded-container-desc">
									现在让我们写下你的文章大纲，这将是你文章的结构。之后，您将能够编辑它。
								</view>
							</view>
							<view style="margin-bottom:20rpx">
								<view style="margin-bottom: 1rem;">
									<cl-button fill @tap="submit" type="primary" :loading="loading">生成大纲</cl-button>
								</view>
								<view>
									<cl-button fill @tap="changeSelf(3)">自己输入</cl-button>
								</view>
							</view>
							<view v-show="list[3].iSelf">
								<cl-textarea style="width: 100%;" v-model="list[3].form.title"
									:showConfirmBar="false" />
								<view style="padding-top:2rem;margin-bottom:20rpx">
									<cl-button fill @tap="next(3)" type="primary" :loading="loading">下一步</cl-button>
								</view>
							</view>
						</view>
						<view v-show="current==4">
							<view class="rounded-container-title">
								生成全文
								<view class="rounded-container-desc">
									现在让我们来看看这篇文章的内容。之后，您将能够编辑它。
								</view>
							</view>
							<view style="margin-bottom:20rpx">
								<view style="margin-bottom: 1rem;">
									<cl-button fill @tap="submit" type="primary" :loading="loading">生成全文</cl-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</cl-page>
</template>

<script setup>
	import {
		reactive,
		ref,
		nextTick,
		onMounted,
		getCurrentInstance,
		onBeforeMount
	} from "vue";
	import {
		onShow,
		onShareAppMessage,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		useStore,
		useCool
	} from "/@/cool";
	import moment from 'moment';
	import {
		useUi
	} from "/@/ui";
	const {
		user
	} = useStore();
	const {
		service,
		storage
	} = useCool();
	const ui = useUi();
	const loading = ref(false);
	const list = ref([{
			label: "详情",
			form: {
				articleLength: "0",
				keyword: "",
				title: ""
			},
			rules: {
				title: {
					required: true,
					message: "内容不能为空"
				}
			}
		},
		{
			label: "标题",
			form: {
				title: ""
			},
			rules: {
				title: {
					required: true,
					message: "内容不能为空"
				}
			},
			iSelf: false
		},
		{
			label: "简介",
			form: {
				title: ""
			},
			rules: {
				title: {
					required: true,
					message: "内容不能为空"
				}
			},
			iSelf: false
		},
		{
			label: "大纲",
			form: {
				title: ""
			},
			rules: {
				title: {
					required: true,
					message: "内容不能为空"
				}
			},
			iSelf: false
		},
		{
			label: "内容",
		}
	])

	function changeSelf(index) {
		list.value[index].iSelf = true
	}
	const options = reactive < any > ({
		area: [{
				label: "短（1000字左右）",
				value: 0
			},
			{
				label: "中（2000字左右）",
				value: 1
			},
			{
				label: "长（3000字左右）",
				value: 2
			}
		],
	});

	function setClipboardData(data) {
		uni.setClipboardData({
			data,
			success: function() {
				// ui.showToast("复制成功");
			}
		});
	}
	const current = ref(0)
	const Form = ref < HTMLElement > ('ClForm');
	const Confirm = ref < HTMLElement > ('ClConfirm');
	const form = ref({
		title: ""
	});
	const rules = reactive({
		title: {
			required: true,
			message: "创作名称不能为空"
		}
	});

	function submit() {}
	onLoad(async (options) => {})
	onMounted(async () => {
		connect();
	})

	function next(index) {
		if (list.value[index].form.title) {
			console.log(index++)
			current.value = index++
		} else {
			ui.showToast("请补全信息");
		}
	}
	async function connect() {
		if (!user.socket) {
			return
		}
		user.socket.on(user.socketId, (message) => {
			console.log(message)
			let {
				code,
				msg
			} = message
			if (code == 1000) {
				let {
					detail,
					...temp
				} = msg
				let isDetail = list.value.find(item => item.id == msg.id)
				let content = ""
				if (isDetail) {
					let index = list.value.findIndex(item => item.id == msg.id)
					if (msg.detail.choices[0].finish_reason == 'stop') {

					} else {}
				} else {
					if (msg.detail.choices[0].finish_reason == 'stop') {

					} else {}
				}
				nextTick(() => {
					scrollToBottom();
				});
			} else {
				loading.value = false;
			}
		});
	}

	function changeCurrent(index) {
		if (index > 0) {
			if (list.value[index].form.title||list.value[index-1].form.title) {
				current.value = index
			}
		} else {
			current.value = index
		}

	}

	function send() {
		if (!loading.value) {
			number.value++
			user.socket.emit("systemMessage", {
				role: "user",
				system: detail.value.system,
				userId: storage.get('userInfo').id,
				form: form.value,
				id: detail.value.id
			});
			loading.value = true
		}
	}

	function scrollToBottom() {
		scrollTop.value = 1000000 + parseInt(Math.random() * 100);
	}
	const scrollTop = ref(0);
	const scrollHeight = ref(0)
	onBeforeMount(() => {
		uni.getSystemInfo({
			success: async (res) => {
				scrollHeight.value = res.windowHeight - res.safeAreaInsets.bottom
			}
		})
	})
	onShow(() => {

	});
	onShareAppMessage(() => {
		return {
			path: "/pages/index/home",
			title: "闯堂兔",
			imageUrl: "/static/share.jpg"
		}
	})
</script>

<style lang="scss" scoped>
	.p-20 {
		height: 100%;
	}

	.rounded-container-desc {
		color: rgb(65 67 87);
		font-size: .875rem;
		margin-top: 0.25rem;
	}

	.rounded-container-title {
		margin-bottom: 1rem;
	}

	.hidden {
		display: none;
	}

	.rounded-md {
		background-color: rgb(255 255 255);
		border: 1rpx solid rgb(209 213 219);
		margin-top: 1.25rem;
		border-radius: 0.375rem;

		.rounded-container {
			padding: 1rem;
		}

		.rounded-menu-item {
			.rounded-menu-list {
				font-size: .875rem;
				padding: 0.75rem 1.5rem;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid rgb(209 213 219);

				.rounded-menu-text {
					font-size: .875rem;
					margin-left: 1rem;
				}

				.rounded-menu-radiu {
					width: 1.5rem;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 1.5rem;
					border-radius: 50%;
					border: 1px solid rgb(209 213 219);
				}
			}

			.rounded-menu-current {
				.rounded-menu-text {
					color: rgb(159 40 243);
				}

				.rounded-menu-radiu {
					color: rgb(159 40 243);
					border: 1px solid rgb(159 40 243);
				}
			}
		}
	}

	.text-base {
		color: rgb(17 20 45);
		font-weight: 500;
		font-size: 1.125rem;
		text-align: center;
	}

	.text-desc {
		margin-top: 0.5rem;
		color: rgb(17 20 45);
		text-align: center;
		font-size: .875rem;
	}

	.item {
		display: flex;
		position: relative;
		margin-bottom: 20rpx;

		.item-flex {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 10px;

			.item-flex-img {
				margin-left: 30rpx;
				background-color: rgb(242 242 242);
				border-radius: 50%;
				padding: 0.375rem;
				width: 32rpx;
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 95%;
					height: 95%;
				}

				color: rgb(112 114 129);
			}
		}

		.animate-absolute {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
			width: .5rem;
			height: .5rem;

			.animate-span {
				width: 100%;
				height: 100%;
				position: relative;

				.animate-ping {
					width: 100%;
					height: 100%;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					position: absolute;
					border-radius: 50%;
					background-color: #6b69f890;
					animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;

					@keyframes ping {

						75%,
						to {
							transform: scale(2);
							opacity: 0
						}
					}
				}

				.rounded-full {
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					position: absolute;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background-color: #6b69f8;
				}
			}

		}

		.content {
			display: block;
			font-size: 28rpx;
			background-color: #fff;
			border-radius: 0.25rem;
			color: rgb(55 65 81);
			box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);

			.text {
				display: block;
				padding: 20rpx 30rpx;
				line-height: 40rpx;
				user-select: auto;
			}

			.image {
				position: relative;
				width: 400rpx;
				display: block;
				border: 1rpx solid #eee;
				border-radius: 6rpx;
			}

			:deep(.code) {
				display: block;
				background-color: #18222c;
				color: #fff;
				padding: 20rpx;
				margin-top: 20rpx;
				overflow: auto;
				border-radius: 10rpx;
				font-size: 24rpx;
			}
		}

		&.r {
			flex-direction: row-reverse;
		}
	}
</style>